<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<script src="/ka/js/config.js"></script>
<link rel="stylesheet" href="/ka/css/index.css">
<html>

<head>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">

    <title>记账</title>
    <link rel="shortcut icon" href="/ka/img/favicon.ico">

    <!-- global stylesheets -->
    <link rel="stylesheet" href="/ka/css/bootstrap.min.css">
    <link rel="stylesheet" href="/ka/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/ka/css/font-icon-style.css">
    <link rel="stylesheet" href="/ka/css/magnific-popup/magnific-popup.css">
    <link rel="stylesheet" href="/ka/css/style.default.css" id="theme-stylesheet">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="/ka/css/apps/media.css">
    <style>

    </style>
</head>

<body>
<div id="app">
    <header class="header">
        <nav class="navbar navbar-expand-lg ">
            <div class="search-box">
                <button class="dismiss"><i class="icon-close"></i></button>
                <form id="searchForm" action="#" role="search">
                    <input type="search" placeholder="Search Now" class="form-control">
                </form>
            </div>
            <div class="container-fluid ">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <div class="navbar-header">
                        <a href="/ka/toIndex" class="navbar-brand">
                            <div class="brand-text brand-big hidden-lg-down"><img src="/ka/img/logo-white.png" alt="Logo"
                                                                                  class="img-fluid"></div>
                            <div class="brand-text brand-small"><img src="/ka/img/logo-icon.png" alt="Logo"
                                                                     class="img-fluid">
                            </div>
                        </a>
                        <a id="toggle-btn" href="#" class="menu-btn active">
                            <span></span>
                            <span></span>
                            <span></span>
                        </a>
                    </div>
                </div>
                <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                    <!-- 全屏按钮-->
                    <li class="nav-item d-flex align-items-center full_scr_exp"><a class="nav-link" href="#"><img
                            src="/ka/img/expand.png" onclick="toggleFullScreen(document.body)" class="img-fluid"
                            alt=""></a>
                    </li>
                    <!-- 退出图片-->
                    <li class="nav-item dropdown"><a id="profile" class="nav-link logout" data-target="#" href="#"
                                                     data-toggle="dropdown" aria-haspopup="true"
                                                     aria-expanded="false"><img
                            src="/ka/img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"
                            style="height: 30px; width: 30px;"></a>
                        <ul aria-labelledby="profile" class="dropdown-menu profile">
                            <!--                        注销弹框-->
                            <li>
                                <a rel="nofollow" @click="logout" class="dropdown-item">
                                    <div class="notification">
                                        <div class="notification-content"><i class="fa fa-power-off"></i>注销</div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <div class="page-content d-flex align-items-stretch">
        <!--用户信息-->
        <nav class="side-navbar">
            <div class="sidebar-header d-flex align-items-center"></div>
            <div style="text-align: center" v-cloak>欢迎您{{nikeName}}!</div>
            <hr>
            <!--      菜单侧边栏-->
            <ul class="list-unstyled">
                <li class="active"><a href="/ka/toIndex"><i class="fa fa-bar-chart"></i>首页</a></li>
                <li><a href="/ka/toChange" aria-expanded="false"> <i class="fa fa-building-o"></i>记账</a></li>
                <li><a href="/ka/toLog"> <i class="fa fa-map-o"></i>账单</a></li>
                <li><a href="/ka/toIndex" aria-expanded="false"> <i class="fa fa-file-o"></i>统计</a></li>
            </ul>
        </nav>

        <div class="content-inner media-cont">
            <el-card class="box-card">
                <div style="text-align: center"></div>
                <span>我的余额:￥{{account}}</span>
                <hr>
                <el-form :model="form" label-width="80px">
                    <el-form-item label="类型:">
                        <!-- 选择器-->
                        <el-select v-model="form.changeType" placeholder="请选择消费类型">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="金额">
                        <el-col :span="14">
                            <el-input v-model="form.changeMoney" placeholder="请输入消费金额"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-col :span="14">
                            <el-date-picker type="date" placeholder="选择日期"
                                            v-model="form.createTime"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.note" placeholder="请输入备注"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                                type="primary"
                                :loading="loading"
                                @click="onSubmit()">{{commit_text}}
                        </el-button>
                        <el-button @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>

</div>
<!--Global Javascript -->
<script src="/ka/js/jquery.min.js"></script>
<script src="/ka/js/popper/popper.min.js"></script>
<script src="/ka/js/tether.min.js"></script>
<script src="/ka/js/bootstrap.min.js"></script>
<script src="/ka/js/jquery.cookie.js"></script>
<script src="/ka/js/jquery.validate.min.js"></script>
<script src="/ka/js/chart.min.js"></script>
<script src="/ka/js/front.js"></script>


</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>


<script th:inline="javascript">
    var app = new Vue({
        el: "#app",
        data: {
            options: [
                {label: "工资", value: 1},
                {label: "外快", value: 2},
                {label: "借贷", value: 3},
                {label: "餐饮", value: 4},
                {label: "通讯", value: 5},
                {label: "交通", value: 6},
                {label: "购物", value: 7},
                {label: "住房", value: 8},
                {label: "娱乐", value: 9},
                {label: "医疗", value: 10},
                {label: "教育", value: 11},
                {label: "红包", value: 12},
                {label: "旅行", value: 13},
                {label: "投资", value: 14},
                {label: "还款", value: 15},
                {label: "宠物", value: 16},
                {label: "还债", value: 17},
                {label: "其他", value: 18},
            ],
            form: {
                // userId: [],
                // changeType: [],
                // changeDate: [],
                // changeMoney: [],
                // note: []
            },
            userId: "",
            nikeName: "",
            commit_text: "记一把",
            loading: false,
            account: 0
        },
        methods: {
            onSubmit() {
                let form = this.form;
                this.commit_text = "记账中...";
                this.loading = true;
                axios.post("/ka/account/change", form).then(function (response) {
                    if (response.data.flag) {
                        app.commit_text = "记账成功!2s返回!";
                        app.getAccount();
                        setTimeout(() => {
                            setTimeout(() => {
                                app.loading = false;
                                app.resetForm();
                            }, 300);
                        }, 2000);
                    } else {
                        app.commit_text = "出错了!重试?";
                        app.loading = false;
                    }
                }).catch(function () {
                    app.commit_text = "出错了!重试?";
                    app.loading = false;

                });
            },
            resetForm() {
                this.form = {};
                let userId = getCookie("userId");
                if (userId === '' || userId === null) {
                    return;
                } else {
                    this.form.userId = userId;
                }
                this.commit_text = "记一把";
            },
            logout() {
                location.href = 'toLogin';
                var uid = getCookie("uid");
                clearCookie("userId");
                clearCookie("uid");
                clearCookie("Authorization");
                clearCookie("username");
                axios.post("/ka/oauth/logout", {uid: uid}).then(function (response) {
                    if (response.data.flag) {
                        location.href = 'toLogin';
                    } else {
                        location.href = 'toLogin';
                    }
                })
            },
            getAccount() {
                axios.post("/ka/accountLog/baseInfo", {userId: this.form.userId}).then((response) => {
                    if (response.data.flag) {
                        app.account = response.data.data.account;
                    }
                });
            }
        },
        created: function () {
            let userId = getCookie("userId");
            if (userId === '' || userId === null) {
                location.href = '/ka/toLogin';
                return;
            } else {
                this.form.userId = userId;
            }
            let useraneme = getCookie("username");
            if (useraneme === '' || useraneme === null) {
                this.nikeName = '';
            } else {
                this.nikeName = ',' + useraneme;
            }
            this.getAccount();
        }

    });
</script>


</html>